examples/angular/with-devtools/src/index.html-5-5 (1)

5-5: ⚠️ Potential issue | 🟡 Minor

Title does not match the example name.

The title is "Basic" but this example is "with-devtools". This appears to be a copy-paste artifact from another example.

📝 Suggested fix

-    <title>Basic</title>
+    <title>With Devtools</title>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/angular/with-devtools/src/index.html` at line 5, The page title in
index.html is incorrect ("Basic"); update the <title> element in the file so it
matches the example name ("with-devtools" or a human-friendly variant like "With
Devtools") to avoid the copy-paste artifact and ensure the example
metadata/title reflects this example.

examples/angular/with-devtools/.editorconfig-11-17 (1)

11-17: ⚠️ Potential issue | 🟡 Minor

Remove the redundant IntelliJ-specific TypeScript setting.

The ij_typescript_use_double_quotes = false setting at line 13 is redundant with the standard quote_type = single setting above it. Since this .editorconfig sets root = true, it's independent of the parent config and doesn't need to maintain consistency with it. However, the duplicate setting should be removed for clarity:

Remove redundant IntelliJ setting

 [*.ts]
 quote_type = single
-ij_typescript_use_double_quotes = false

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/angular/with-devtools/.editorconfig` around lines 11 - 17, Remove
the redundant IntelliJ-specific TypeScript setting by deleting the line
"ij_typescript_use_double_quotes = false" from the file; keep the standard
"[*.ts]" block with "quote_type = single" as the single source of truth for
quote style and remove only the "ij_typescript_use_double_quotes" entry so there
is no duplicate configuration.

examples/angular/panel/src/index.html-5-5 (1)

5-5: ⚠️ Potential issue | 🟡 Minor

Update the page title to match the panel example.

<title>Basic</title> looks like a copy/paste mismatch for this panel app and can be confusing in browser tabs.

Suggested fix

-    <title>Basic</title>
+    <title>Panel</title>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/angular/panel/src/index.html` at line 5, Update the HTML title in
examples/angular/panel/src/index.html: replace the current <title>Basic</title>
with a more accurate title reflecting the app (for example "Angular Panel
Example" or "Panel") so the browser tab and metadata correctly identify this
panel demo; modify the <title> tag content only to match the panel example name.

examples/angular/panel/.vscode/launch.json-9-16 (1)

9-16: ⚠️ Potential issue | 🟡 Minor

preLaunchTask references npm but project uses pnpm.

The preLaunchTask values use "npm: start" and "npm: test", but the package.json specifies pnpm@10.24.0 as the package manager. VS Code may not recognize these tasks correctly. Consider updating to match the project's package manager or ensure VS Code's task auto-detection handles this.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/angular/panel/.vscode/launch.json` around lines 9 - 16, Update the
VS Code launch configuration so the preLaunchTask matches the project's package
manager: replace the "preLaunchTask" values referencing "npm: start" and "npm:
test" with the corresponding "pnpm: start" and "pnpm: test" (or ensure tasks
with those names exist), targeting the entries that define the Chrome launches
("name": "ng serve"/implicit block and "name": "ng test") so VS Code will run
the correct pnpm tasks before launching.

examples/angular/with-devtools/angular.json-12-13 (1)

12-13: ⚠️ Potential issue | 🟡 Minor

Project name should match the example folder.

The project is named "basic" but this configuration is in the with-devtools example directory. This appears to be a copy-paste oversight from another example. Consider renaming to "with-devtools" for consistency and to avoid confusion.

📝 Proposed fix

   "projects": {
-    "basic": {
+    "with-devtools": {
       "projectType": "application",

Also update build targets on lines 61 and 64:

-              "buildTarget": "basic:build:production"
+              "buildTarget": "with-devtools:build:production"
             },
             "development": {
-              "buildTarget": "basic:build:development"
+              "buildTarget": "with-devtools:build:development"

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/angular/with-devtools/angular.json` around lines 12 - 13, The
project key in the angular.json "projects" object is incorrectly named "basic"
but should match the example folder; rename the project key from "basic" to
"with-devtools" and update every reference to that key inside the file (notably
the build and serve targets currently referencing "basic") so they point to
"with-devtools" instead; ensure target entries such as the "build" and "serve"
(and any "architect" or "targets" blocks) are updated to use the new project
name so configuration and CLI commands remain consistent.

examples/angular/panel/README.md-1-3 (1)

1-3: ⚠️ Potential issue | 🟡 Minor

Update README title to match the panel example directory.

The README title says "# Basic" but this file is in the panel example directory. The title should be "# Panel" for consistency with the directory name.

📝 Proposed fix

-# Basic
+# Panel

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/angular/panel/README.md` around lines 1 - 3, The README title
currently reads "Basic" but should match the example directory name; update the
top-level heading in the README.md by replacing the heading text "Basic" with
"Panel" so the file title reads "# Panel" for consistency with the panel example
directory.

docs/framework/angular/guides/custom-plugins.md-178-178 (1)

178-178: ⚠️ Potential issue | 🟡 Minor

Minor grammar: "built in" should be hyphenated.

📝 Suggested fix

-Both the `TanStackDevtools` and the TanStack `EventClient` come with built in debug mode which will log to the console the emitted event as well as the EventClient status.
+Both the `TanStackDevtools` and the TanStack `EventClient` come with built-in debug mode which will log to the console the emitted event as well as the EventClient status.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/framework/angular/guides/custom-plugins.md` at line 178, The phrase
"built in" in the sentence referencing TanStackDevtools and the TanStack
EventClient should be hyphenated; update the sentence so it reads "built-in
debug mode" where "built in" appears (affecting the line mentioning
TanStackDevtools and EventClient) to correct the grammar.

examples/angular/with-devtools/README.md-1-3 (1)

1-3: ⚠️ Potential issue | 🟡 Minor

README title mismatch with project directory.

The title says "Basic" but this file is in the with-devtools example directory. This appears to be a copy-paste oversight from the basic example.

📝 Suggested fix

-# Basic
+# With Devtools

-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.0.
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli).

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/angular/with-devtools/README.md` around lines 1 - 3, The README
title currently reads "Basic" which doesn't match this example's directory;
update the top-level heading in examples/angular/with-devtools/README.md (the
line containing "# Basic") to a correct, descriptive title such as "#
with-devtools" or "# Angular with DevTools" so the file name and content reflect
the example's purpose.

docs/framework/angular/guides/custom-plugins.md-197-197 (1)

197-197: ⚠️ Potential issue | 🟡 Minor

Minor spelling: "Where as" should be "Whereas".

📝 Suggested fix

-Where as the EventClient's debug mode can be activated by:
+Whereas the EventClient's debug mode can be activated by:

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/framework/angular/guides/custom-plugins.md` at line 197, Replace the
incorrect two-word phrase "Where as" with the correct single-word "Whereas" in
the docs/framework/angular/guides/custom-plugins.md content to fix the minor
spelling error.

docs/framework/angular/guides/custom-plugins.md-213-216 (1)

213-216: ⚠️ Potential issue | 🟡 Minor

Add language specifier to fenced code block.

The code block showing debug output should have a language specifier for consistent formatting.

📝 Suggested fix

-```
+```text
 [tanstack-devtools:client-bus] Initializing client event bus

 [tanstack-devtools:custom-devtools-plugin] Registered event to bus custom-devtools:counter-state
 ```

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/framework/angular/guides/custom-plugins.md` around lines 213 - 216, The
fenced code block showing debug output lacks a language specifier; update the
block in docs/framework/angular/guides/custom-plugins.md around the debug output
containing "[tanstack-devtools:client-bus] Initializing client event bus" and
"[tanstack-devtools:custom-devtools-plugin] Registered event to bus
custom-devtools:counter-state" by adding a language tag (e.g., ```text) after
the opening backticks so the block becomes a fenced code block with the "text"
specifier for consistent formatting.

docs/framework/angular/guides/custom-plugins.md-122-135 (1)

122-135: ⚠️ Potential issue | 🟡 Minor

Template incorrectly calls getter with parentheses.

In the template at line 125, stateHistory() is called with parentheses, but stateHistory is defined as a getter (line 133-135), not a method. Getters should be accessed without parentheses.

📝 Suggested fix

   template: `
     <div>
       <div>{{ state()?.count }}</div>
-      <div>{{ stateHistory() }}</div>
+      <div>{{ stateHistory }}</div>
     </div>
   `,

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/framework/angular/guides/custom-plugins.md` around lines 122 - 135, The
template incorrectly invokes the getter stateHistory as a method; update the
template to reference the getter without parentheses (use {{ stateHistory }}
instead of {{ stateHistory() }}) so it matches the DevtoolPanel get
stateHistory() accessor and returns the computed JSON string properly.

docs/framework/angular/basic-setup.md-18-32 (1)

18-32: ⚠️ Potential issue | 🟡 Minor

Fix import name mismatch in code example.

The import statement on line 20 imports TanStackDevtoolsComponent, but the imports array on line 25 references TanStackDevtools. This inconsistency will cause a compilation error when users follow this documentation.

📝 Proposed fix

 ```typescript
 import { Component } from '@angular/core'
-import { TanStackDevtoolsComponent } from '@tanstack/angular-devtools'
+import { TanStackDevtools } from '@tanstack/angular-devtools'

 `@Component`({
   selector: 'app-root',
   standalone: true,
   imports: [TanStackDevtools],

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/framework/angular/basic-setup.md` around lines 18 - 32, The import name
in the example is inconsistent: the file imports TanStackDevtoolsComponent but
the App component's standalone imports array references TanStackDevtools. Fix by
making the imported symbol match the one used in the App component — either
change the import to TanStackDevtools (recommended) or change the imports array
to use TanStackDevtoolsComponent so the imported identifier and the imports
entry are the same; update the import statement near the top that currently
names TanStackDevtoolsComponent accordingly.

docs/framework/angular/adapter.md-46-48 (1)

46-48: ⚠️ Potential issue | 🟡 Minor

Misleading text references non-existent component field.

Line 48 states the adapter "uses component ... instead of render", but the actual field name shown in the type definition and code examples is render. This appears to be outdated or incorrect.

📝 Proposed fix

-The Angular adapter uses `component` (an Angular component class reference) instead of `render` (a JSX element) in plugin definitions. Inputs are provided through the `inputs` field and bound to the component with `setInput()`, rather than being embedded directly in a JSX expression or passed via `v-bind`.
+The Angular adapter uses `render` with an Angular component class reference (rather than a JSX element) in plugin definitions. Inputs are provided through the `inputs` field and bound to the component with `setInput()`, rather than being embedded directly in a JSX expression or passed via `v-bind`.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/framework/angular/adapter.md` around lines 46 - 48, The sentence
incorrectly refers to a non-existent `component` field; update the documentation
text to reference the actual `render` field used in the adapter type and
examples (e.g., change "uses `component` (an Angular component class reference)
instead of `render`" to indicate that the adapter uses `render` and explain that
inputs are provided via the `inputs` field and bound with `setInput()`), or if
the implementation should instead use `component`, update the type/examples to
match—ensure consistency between the docs and the symbols `render`, `inputs`,
and `setInput()`.

docs/framework/angular/adapter.md-38-45 (1)

38-45: ⚠️ Potential issue | 🟡 Minor

Documentation table has incorrect type for render field.

The table states render has type Type<any>, but the type definition above (line 31) shows it should be TanStackDevtoolsAngularPluginRender. The description should align with the actual type definition for accuracy.

📝 Proposed fix

-| `render`      | `Type<any>` | The Angular component class to render as the plugin panel content. |
+| `render`      | `TanStackDevtoolsAngularPluginRender` | The Angular component class, lazy component (via dynamic import), or custom function to render as the plugin panel content. |

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/framework/angular/adapter.md` around lines 38 - 45, The docs table
incorrectly types the render field as Type<any>; update the table entry for the
`render` row to use the actual type name `TanStackDevtoolsAngularPluginRender`
and adjust the description to reference that type (e.g., "The render property is
a TanStackDevtoolsAngularPluginRender that defines the Angular component/class
used for plugin panel content"); ensure the `render` column now matches the type
alias `TanStackDevtoolsAngularPluginRender` used in the code.

packages/angular-devtools/src/types.ts-44-62 (1)

44-62: ⚠️ Potential issue | 🟡 Minor

JSDoc example references component but type uses render.

The JSDoc comment states "Each plugin should have a component" and the example shows component: MyPluginComponent, but the actual TanStackDevtoolsAngularPlugin type at line 38 defines render, not component. This mismatch will confuse users.

📝 Proposed fix to align JSDoc with actual type

   /**
    * Array of plugins to be used in the devtools.
-   * Each plugin should have a `component` that is an Angular component class.
+   * Each plugin should have a `render` property that specifies an Angular component class or render function.
    *
    * Example:
    * ```typescript
    * `@Component`({
    *   template: `<tanstack-devtools [plugins]="plugins" />`,
    *   imports: [TanStackDevtoolsComponent],
    * })
    * class AppComponent {
    *   plugins: TanStackDevtoolsAngularPlugin[] = [
-   *     { name: 'My Plugin', component: MyPluginComponent }
+   *     { name: 'My Plugin', render: MyPluginComponent }
    *   ];
    * }
    * ```
    */

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/angular-devtools/src/types.ts` around lines 44 - 62, The JSDoc for
TanStackDevtoolsAngularInit and its example incorrectly refer to a `component`
property while the actual type TanStackDevtoolsAngularPlugin defines `render`;
update the JSDoc/example to use `render` (e.g., replace `{ name: 'My Plugin',
component: MyPluginComponent }` with `{ name: 'My Plugin', render:
MyPluginComponent }`) so the documentation matches the
TanStackDevtoolsAngularPlugin type and avoids confusion.

packages/devtools-utils/src/angular/panel.ts-53-57 (1)

53-57: ⚠️ Potential issue | 🟡 Minor

Add error handling for the lazy-loaded panel.

When CoreClass is a function returning a Promise (lazy loading), there's no .catch() handler. If the dynamic import fails, the error will be unhandled.

Proposed fix

         if (isConstructor) {
           mount(new CoreClass(inputs()))
         } else {
           CoreClass()
             .then((ResolvedCoreClass) => new ResolvedCoreClass(inputs()))
             .then(mount)
+            .catch((error) => {
+              console.error('[createAngularPanel] Failed to load panel:', error)
+            })
         }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/devtools-utils/src/angular/panel.ts` around lines 53 - 57, The
lazy-load branch calling CoreClass() lacks error handling; wrap the promise
chain starting at CoreClass() so rejections are caught and handled—add a .catch
handler to the CoreClass().then(...).then(mount) chain that logs the error
and/or invokes the existing mount/error handling flow (reference CoreClass,
inputs(), and mount) to avoid unhandled promise rejections and surface failures
during dynamic import.

packages/angular-devtools/provider/with-devtools.ts-75-80 (1)

75-80: ⚠️ Potential issue | 🟡 Minor

Use isPlatformBrowser() instead of string comparison for platform check.

The PLATFORM_ID value should be checked using Angular's isPlatformBrowser() utility from @angular/common rather than direct string comparison. The string 'browser' is not the documented API contract.

Proposed fix

Add to imports:

import { isPlatformBrowser } from '@angular/common'

-      if (inject(PLATFORM_ID) !== 'browser') {
+      if (!isPlatformBrowser(inject(PLATFORM_ID))) {
         return
       }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/angular-devtools/provider/with-devtools.ts` around lines 75 - 80,
Replace the direct string comparison of PLATFORM_ID with Angular's
isPlatformBrowser check: import isPlatformBrowser from '@angular/common' and
change the platform guard in the provideEnvironmentInitializer block (where
inject(PLATFORM_ID) is used) to use if (!isPlatformBrowser(inject(PLATFORM_ID)))
return; so the environment check uses the documented API rather than comparing
to the string 'browser'.

packages/angular-devtools/provider/with-devtools.ts-91-103 (1)

91-103: ⚠️ Potential issue | 🟡 Minor

Add error handling for the dynamic import.

The dynamic import of @tanstack/angular-devtools has no .catch() handler. If the import fails (e.g., network error, bundler misconfiguration), the error will be silently swallowed or result in an unhandled promise rejection.

Proposed fix

       import('@tanstack/angular-devtools').then(({ TanStackDevtools }) => {
         const componentRef = createComponent(TanStackDevtools, {
           environmentInjector: injector,
           bindings: [
             inputBinding('config', config),
             inputBinding('plugins', plugins),
             inputBinding('eventBusConfig', eventBusConfig),
           ],
         })

         applicationRef.attachView(componentRef.hostView)
         componentRef.changeDetectorRef.detectChanges()
-      })
+      }).catch((error) => {
+        console.error('[`@tanstack/angular-devtools`] Failed to load devtools:', error)
+      })

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/angular-devtools/provider/with-devtools.ts` around lines 91 - 103,
The dynamic import of '@tanstack/angular-devtools' in with-devtools.ts lacks
error handling; update the import promise chain that calls
import('@tanstack/angular-devtools').then(...) to add a .catch handler that logs
the error and a contextual message (e.g., "Failed to load TanStackDevtools") and
avoids leaving an unhandled rejection; reference the import call and the
createComponent/TanStackDevtools block so the catch can report the error and
optionally perform a safe fallback (e.g., skip attaching the devtools) if the
module fails to load.

packages/devtools-utils/src/angular/panel.ts-15-20 (1)

15-20: ⚠️ Potential issue | 🟡 Minor

Type guard using !!o.prototype is fragile.

This check relies on the fact that arrow functions and async functions lack a prototype property, while class constructors have one. However, regular functions also have prototype, so if someone passes a non-arrow function that returns a Promise, it would incorrectly be identified as a constructor.

Consider a more robust check:

Proposed fix

 function isPanelClassConstructor<
   TComponentProps extends DevtoolsPanelProps,
   TCoreDevtoolsClass extends BaseCorePanelClass,
 >(o: any): o is CoreClassConstructor<TComponentProps, TCoreDevtoolsClass> {
-  return !!o.prototype
+  // Classes have a prototype with a constructor property pointing back to themselves
+  return typeof o === 'function' && o.prototype?.constructor === o && !o.prototype[Symbol.toStringTag]
 }

Alternatively, if the lazy factory is always expected to be an arrow function or async function (which is typical for dynamic imports), the current approach works in practice but deserves a comment explaining the assumption.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/devtools-utils/src/angular/panel.ts` around lines 15 - 20, The
type-guard isPanelClassConstructor currently uses !!o.prototype which
misclassifies plain functions as class constructors; replace that heuristic with
a robust check that ensures o is an ES6 class constructor, e.g. verify typeof o
=== 'function' and use Function.prototype.toString.call(o) to test for a leading
"class" token (e.g. /^class\s/.test(...)); update the function
isPanelClassConstructor<TComponentProps, TCoreDevtoolsClass> to use this test
(or, if you intentionally only accept arrow/async factories, add a clear comment
explaining that assumption) so non-class functions are not treated as
constructors.

examples/angular/with-devtools/.vscode/mcp.json (1)

6-6: Angular's official MCP documentation uses unpinned @angular/cli intentionally.

The unpinned version on line 6 aligns with Angular's documented setup for .vscode/mcp.json. Since the MCP server is experimental, Angular recommends tracking the latest CLI to pick up fixes and improvements rather than pinning.

While pinning to @angular/cli@20 would improve reproducibility across team members, it goes against Angular's official guidance for this feature. If your team prefers consistency and controlled upgrades, pinning is a valid choice, but it's not the documented approach.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/angular/with-devtools/.vscode/mcp.json` at line 6, The current args
entry ["-y", "@angular/cli", "mcp"] intentionally uses an unpinned `@angular/cli`
per Angular's MCP docs—leave it as-is to track latest fixes; if you instead want
reproducible behavior across the team, change that args element to
"@angular/cli@20" (i.e., replace "@angular/cli" with "@angular/cli@20") so the
MCP launch uses the pinned CLI version.

examples/angular/panel/package.json (1)

22-22: Inconsistent version specifier for @tanstack/devtools-event-client.

This dependency uses an exact version (0.4.2) while other @tanstack/* packages use caret ranges (^0.0.1, ^0.10.13, ^0.3.3). Consider using a caret range for consistency unless pinning is intentional.

Suggested fix

-    "@tanstack/devtools-event-client": "0.4.2",
+    "@tanstack/devtools-event-client": "^0.4.2",

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/angular/panel/package.json` at line 22, The dependency
"@tanstack/devtools-event-client" is pinned to an exact version "0.4.2" while
other `@tanstack` packages in package.json use caret ranges; update the version
specifier for "@tanstack/devtools-event-client" to use a caret range (e.g.
"^0.4.2") to match the other `@tanstack/`* entries and maintain consistent semver
behavior across the project.

packages/devtools-utils/vite.config.angular.ts (1)

5-7: Drop the empty plugins field for clarity.

No behavior change, just removes noise in the config object.

♻️ Suggested cleanup

 const config = defineConfig({
-  plugins: [],
   test: {
     name: packageJson.name,

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/devtools-utils/vite.config.angular.ts` around lines 5 - 7, The
config object created via defineConfig currently includes an unnecessary empty
"plugins" property; remove the "plugins: []" entry from the defineConfig call
(the config constant) to clean up the Vite configuration without changing
behavior—locate the defineConfig({ ... }) block that assigns to config and
delete the plugins key.

examples/angular/basic/src/app/devtools/custom-devtools-panel.ts (1)

27-28: Clarify the "Automatically added" comment.

The comment // Automatically added on the theme input is unclear. Consider elaborating on what "automatically adds" this input or remove the comment if it's no longer relevant.

📝 Suggested clarification

-  // Automatically added
+  // Injected by the devtools plugin framework
   readonly theme = input<string>()

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/angular/basic/src/app/devtools/custom-devtools-panel.ts` around
lines 27 - 28, The "// Automatically added" comment above the readonly theme =
input<string>() declaration is ambiguous; either replace it with a clearer note
that states who/what adds this input and when (e.g., "Added by DevTools host at
runtime" or "Injected by framework build step") or remove the comment entirely
if it's stale; update the comment adjacent to the readonly theme =
input<string>() symbol to explicitly state its source and purpose so future
readers understand why the input exists.

examples/angular/panel/src/app/counter.ts (2)

10-28: Consider extracting duplicated emit logic.

The DevtoolsEventClient.emit('counter-state', ...) call is duplicated in both increment and decrement. Consider extracting this into a helper function for DRY code.

♻️ Proposed refactor

 export function createCounter() {
   const count = signal(0)
   const history: Array<number> = []
 
+  const emitState = () => {
+    DevtoolsEventClient.emit('counter-state', {
+      count: count(),
+      history,
+    })
+  }
+
   return {
     value: () => count(),
     increment: () => {
       count.update((n) => n + 1)
       history.push(count())
-
-      // The emit eventSuffix must match that of the EventMap defined in eventClient.ts
-      DevtoolsEventClient.emit('counter-state', {
-        count: count(),
-        history,
-      })
+      emitState()
     },
     decrement: () => {
       count.update((n) => n - 1)
       history.push(count())
-
-      DevtoolsEventClient.emit('counter-state', {
-        count: count(),
-        history,
-      })
+      emitState()
     },
   }
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/angular/panel/src/app/counter.ts` around lines 10 - 28, increment
and decrement both call DevtoolsEventClient.emit('counter-state', { count:
count(), history }) causing duplicated emit logic; extract that into a small
helper (e.g., emitCounterState or notifyCounterState) that reads count() and
history and calls DevtoolsEventClient.emit('counter-state', payload), then
replace the duplicated emit calls in the increment and decrement functions with
a single call to the new helper; ensure the helper is colocated with the
count/history variables and used after updating history so payload stays
correct.

---

4-9: Consider emitting initial state.

The panel won't display any state until the user clicks increment or decrement for the first time. Consider emitting the initial state when the counter is created, or document this behavior as intentional.

💡 Optional: Emit initial state

 export function createCounter() {
   const count = signal(0)
   const history: Array<number> = []
+
+  // Emit initial state
+  DevtoolsEventClient.emit('counter-state', {
+    count: count(),
+    history,
+  })
 
   return {

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/angular/panel/src/app/counter.ts` around lines 4 - 9, createCounter
currently never emits its initial value so the UI sees no state until the first
increment/decrement; fix it by emitting the initial state when the counter is
created: after initializing count and history in createCounter, record the
initial value (e.g., push count() into history) and invoke the same
notifier/emit function you use for subsequent updates (or expose/ call value()
once) so the panel receives the initial state; update references in
createCounter, count, history and the notifier/emit handler accordingly.

docs/framework/angular/basic-setup.md (1)

51-58: Class name inconsistency between examples.

The first example uses App as the class name (line 31), while this example uses AppComponent (line 51). For consistency within the same documentation page, consider using the same naming convention.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/framework/angular/basic-setup.md` around lines 51 - 58, The examples use
inconsistent class names — one declares class App and the later snippet declares
class AppComponent; update the later example so the class name matches the first
example (e.g., rename AppComponent to App) and ensure the export and any
internal references (plugins array, TanStackDevtoolsAngularPlugin,
AngularQueryDevtoolsPanel) are updated accordingly so both examples use the same
class identifier.

packages/angular-devtools/package.json (2)

55-63: Duplicate tslib in dependencies and devDependencies.

tslib is listed in both dependencies (line 57) and devDependencies (line 62). The runtime dependency listing is sufficient; the devDependencies entry is redundant.

♻️ Remove duplicate tslib

   "devDependencies": {
     "@angular/core": "^21.2.0",
-    "ng-packagr": "^21.2.0",
-    "tslib": "^2.3.0"
+    "ng-packagr": "^21.2.0"
   },

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/angular-devtools/package.json` around lines 55 - 63, Remove the
duplicate tslib entry by keeping it under "dependencies" and deleting the
"tslib" entry from "devDependencies" in package.json; update the package.json
object so only the top-level "dependencies" contains "tslib" and ensure no other
references to tslib remain in dev tooling config (look for "tslib" in the
package.json dependencies/devDependencies blocks).

---

53-53: Build script uses Unix-specific commands.

The rm -rf commands in the build script are not cross-platform. This may cause issues for contributors on Windows.

♻️ Use cross-platform alternative

Consider using rimraf or the existing premove (used in the clean script) for cross-platform compatibility:

-    "build": "ng-packagr -p ng-package.json -c tsconfig.build.json && rm -rf ./dist/package.json && rm -rf ./dist/provider/package.json"
+    "build": "ng-packagr -p ng-package.json -c tsconfig.build.json && premove ./dist/package.json ./dist/provider/package.json"

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/angular-devtools/package.json` at line 53, The build script in
package.json ("build") uses Unix-only rm -rf; replace those calls with a
cross-platform remover such as rimraf (or reuse the existing "premove" helper
used by "clean") so Windows contributors won't fail; update the "build" script
to call rimraf on ./dist/package.json and ./dist/provider/package.json (or call
the existing preremove command), and if using rimraf add it to devDependencies
and/or the scripts so CI and local installs have the tool available.

examples/angular/basic/src/app/app.ts (1)

19-21: Consider using a more meaningful defer trigger condition.

@defer (when true) is equivalent to an unconditional defer, which loads the content when the browser is idle. This works but the when true condition is redundant and potentially confusing.

♻️ Optional: Simplified defer syntax

-    `@defer` (when true) {
+    `@defer` {
       <tanstack-devtools [plugins]="plugins()" [eventBusConfig]="{ debug: true }" />
     }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/angular/basic/src/app/app.ts` around lines 19 - 21, The `@defer` block
uses an explicit always-true condition (`@defer` (when true)) which is redundant;
change it to use the simpler unconditional defer syntax or a meaningful
predicate instead. Update the `@defer` usage wrapping <tanstack-devtools
[plugins]="plugins()" [eventBusConfig]="{ debug: true }" /> by removing "(when
true)" or replacing it with a real trigger (e.g., a boolean like isIdle or
isDevMode) so the intent is clear and the defer behavior for tanstack-devtools
and plugins() is preserved.

examples/angular/panel/src/app/devtools/custom-devtools-panel.ts (1)

12-17: Consider using textContent for safer DOM updates (optional for example code).

The static analysis flagged the innerHTML usage. While in this example the data is trusted internal state (numeric count and array history), for production patterns consider using DOM APIs like textContent or a sanitization library.

For this example demonstrating devtools integration, the current approach is acceptable.

♻️ Optional: Safer DOM update pattern

-    function render(count: number, history: string) {
-      plugin.innerHTML = `
-       <div>counter state: ${count}</div>
-       <div>counter history: ${history}</div>
-      `
-    }
+    function render(count: number, history: string) {
+      plugin.textContent = ''
+      const countDiv = element.ownerDocument.createElement('div')
+      countDiv.textContent = `counter state: ${count}`
+      const historyDiv = element.ownerDocument.createElement('div')
+      historyDiv.textContent = `counter history: ${history}`
+      plugin.appendChild(countDiv)
+      plugin.appendChild(historyDiv)
+    }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/angular/panel/src/app/devtools/custom-devtools-panel.ts` around
lines 12 - 17, The render(count: number, history: string) function writes
unescaped HTML into plugin via plugin.innerHTML which static analysis flagged;
change render to avoid innerHTML by creating or selecting child elements under
the plugin container and setting their textContent (or concatenating safe
strings) to display count and history, e.g., create two divs or reuse existing
elements and assign their textContent using the plugin reference instead of
assigning plugin.innerHTML.

packages/angular-devtools/provider/with-devtools.ts (2)

86-89: Plugins are set once and won't react to changes in devtoolsOptions().plugins.

config and eventBusConfig are wrapped in computed() to stay reactive, but plugins is set imperatively with plugins.set(...) only during initialization. If devtoolsOptions().plugins changes later, the devtools won't reflect those changes.

If this is intentional (plugins are expected to be static), consider adding a brief comment. Otherwise, consider using an effect() to keep plugins in sync:

Proposed fix if reactivity is needed

+      import { effect } from '@angular/core'
       // ...
-      plugins.set(devtoolsOptions().plugins ?? [])
+      effect(() => {
+        plugins.set(devtoolsOptions().plugins ?? [])
+      })

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/angular-devtools/provider/with-devtools.ts` around lines 86 - 89,
The plugins array is only set once with plugins.set(devtoolsOptions().plugins ??
[]) and won't update when devtoolsOptions().plugins changes; change this to a
reactive effect that watches devtoolsOptions().plugins and calls
plugins.set(...) whenever it updates (or add a comment if immutability is
intentional). Specifically, replace the one-time call to plugins.set with an
effect/autorun that reads devtoolsOptions().plugins and updates plugins via
plugins.set(...) so it stays in sync with the computed config/eventBusConfig
used elsewhere.

---

32-34: Consider tightening the Array<any> types.

Both WithDevtoolsOptionsFn and WithDevtoolsOptions.deps use Array<any>, which loses type safety. If stronger typing isn't feasible due to Angular DI constraints, this is acceptable, but a brief JSDoc comment explaining why any is necessary would help future maintainers.

Also applies to: 56-58

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/angular-devtools/provider/with-devtools.ts` around lines 32 - 34,
Tighten the loose Array<any> usages by replacing them with a safer type (prefer
unknown[] or make WithDevtoolsOptionsFn generic like <Args extends
any[]>(...args: Args) => TanStackDevtoolsAllOptions and use Args for
WithDevtoolsOptions.deps) so callers retain type information; if Angular DI
constraints prevent stronger typing, add a short JSDoc above
WithDevtoolsOptionsFn and the WithDevtoolsOptions.deps field explaining why any
is necessary and referencing the DI limitation. Ensure you update the
declarations for WithDevtoolsOptionsFn and the WithDevtoolsOptions.deps usage
(the symbols named WithDevtoolsOptionsFn and WithDevtoolsOptions.deps)
consistently.

packages/devtools-utils/src/angular/panel.ts (1)

22-65: Consider adding JSDoc and explicit return type for public API clarity.

createAngularPanel is a public API but lacks documentation explaining its purpose, the tuple return structure, and why the second element is () => null. Adding a brief JSDoc (without @params/@returns per coding guidelines) and an explicit return type would improve discoverability.

Example documentation

+/**
+ * Creates an Angular panel adapter for TanStack Devtools.
+ * 
+ * Accepts either a CoreClass constructor directly or a lazy loader function
+ * that returns a Promise resolving to the constructor.
+ * 
+ * Returns a tuple where the first element is a factory for mounting the panel,
+ * and the second is a no-op placeholder for framework compatibility.
+ */
 export function createAngularPanel<
   TComponentProps extends DevtoolsPanelProps,
   TCoreDevtoolsClass extends BaseCorePanelClass,
 >(
   CoreClass:
     | CoreClassConstructor<TComponentProps, TCoreDevtoolsClass>
     | (() => Promise<
         CoreClassConstructor<TComponentProps, TCoreDevtoolsClass>
       >),
-) {
+): readonly [
+  () => (inputs: () => TComponentProps, host: HTMLElement) => () => void,
+  () => null,
+] {

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/devtools-utils/src/angular/panel.ts` around lines 22 - 65, Add JSDoc
and an explicit return type to the public function createAngularPanel to
document its purpose, the tuple structure, and why the second tuple entry is ()
=> null; update the function signature to include a clear return type (e.g.,
readonly [ (inputs: () => TComponentProps, host: HTMLElement) => () => void, ()
=> null ]) and add a brief JSDoc block above createAngularPanel describing what
the factory returns, what the first tuple function does (mount/unmount via
CoreClass), and why the second is a stub; reference the createAngularPanel
function, the returned tuple and the second element (() => null) when making
these edits.